﻿@model ScrumTracker.Models.Sprint
@{
    ViewBag.Title = Model.Product.Name + " > " + @Model.Name;
}
<script type="text/javascript">
    $(function () {
        resizeColumns();

        $(window).resize(function () {
            resizeColumns();
        });

        $('.sprint[value=@(Model.SprintId)]').attr('selected', 'selected');

        loadBacklog();
        loadSprint();
    });

    function resizeColumns() {
        var columnsHeight = $(window).height() - $('#header').outerHeight();
        $('#columns').height(columnsHeight);
        var scrollingListHeight = columnsHeight - 48;
        $('.scrolling_list').height(scrollingListHeight);
    }

    function loadBacklog(){
        $('#backlog').load('@Url.Action("Backlog", "Products", new { @id = Model.ProductId })', function(){
                $('.backlog_story:even').css('background-color', '#eee');
                $('.backlog_story:odd').css('background-color', '#ddd');
            }
        );
    }

    function loadSprint(){
        $('#sprint').load('@Url.Action("Items", "Sprints", new { @id = Model.SprintId })', function(){
                $('.sprint_story:even').css('background-color', '#eee');
                $('.sprint_story:odd').css('background-color', '#ddd');
            }
        );
    }

    $(function () {
        $('#newStory').click(function (e) {
            e.preventDefault();
            $("#add-dialog-modal").dialog("destroy");
            $("#add-dialog-modal").dialog({
                width: 800,
                height: 600,
                modal: true,
                resizable: false,
                close: function (event, ui) {
                    loadBacklog();            
                }
            });
        });

        $('a[rel=edit_story]').live("click", function (e) {
            e.preventDefault();
            var issueId = $(this).closest('li').attr('issue_id');
            var editUrl = '@(Url.Action("Edit", "Stories", new { id = "issue_id" }))'.replace('issue_id', issueId);
            $('#edit-dialog-modal').find('iframe').attr('src', editUrl);

            $("#edit-dialog-modal").dialog("destroy");
            $("#edit-dialog-modal").dialog({
                width: 800,
                height: 600,
                modal: true,
                resizable: false,
                close: function (event, ui) {
                    loadBacklog();
                }
            });
        });

        $('a[rel=add_to_sprint]').live("click", function (e) {
            var issueId = $(this).closest('li').attr('issue_id');
            var sprintId = @(Model.SprintId);
            var updateUrl = '@(Url.Action("Update", "Stories", new { id = "issue_id" }))'.replace('issue_id', issueId);

            $.ajax({
                url: updateUrl,
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({SprintId: sprintId}),
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    loadBacklog();
                    loadSprint();
                }
            });
        });

        $('a[rel=exclude]').live("click", function (e) {
            var issueId = $(this).closest('li').attr('issue_id');
            var sprintId = @(Model.SprintId);
            var updateUrl = '@(Url.Action("Update", "Stories", new { id = "issue_id" }))'.replace('issue_id', issueId);

            $.ajax({
                url: updateUrl,
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({SprintId: null}),
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    loadBacklog();
                    loadSprint();
                }
            });
        });

        $('a[rel=tasks]').live("click", function (e) {
            var issueId = $(this).attr('issue_id');
            $(this).closest('li').find('.tasks').slideDown();
        });
    });
</script>
<div id="add-dialog-modal" title="Add Story" style="overflow: hidden; padding: 3px 0 3px 0; display: none;">
    <iframe src="@Url.Action("New", "Stories", new { ProductId = 1 })" style="width: 100%; height: 100%;" frameborder="0"></iframe>
</div>
<div id="edit-dialog-modal" title="Edit Story" style="overflow: hidden; padding: 3px 0 3px 0; display: none;">
    <iframe src="@Url.Action("Edit", "Stories", new { ProductId = 1 })" style="width: 100%; height: 100%;" frameborder="0"></iframe>
</div>
<table id="columns" border="0" width="100%" style="border-spacing: 8px; min-height: 600px;">
    <tr style="display: none;">
        <td colspan="3">
        </td>
    </tr>
    <tr>
        <td style="width: 33%; vertical-align: top;">
            <div style="border: 1px solid Black; height: 100%; position: relative;">
                <div style="height: 32px; line-height: 32px; background-color: Gray; color: White;">@Model.Product.Name
                    > Backlog <a id="newStory" style="float: right;" href="@(Url.Action("new", "stories", new { ProductId = Model.ProductId }))">Add Item</a></div>
                <ul id="backlog" class="scrolling_list" style="list-style-type: none; margin: 0; padding: 0; overflow: auto; width: 100%; height: 100%;">
                    @*@Html.Partial("~/Views/Stories/_List.cshtml", Model.Product.Stories.OrderByDescending(s => s.Priority).ThenBy(s => s.Effort).ToList())*@
                </ul>
            </div>
        </td>
        <td style="width: 33%; vertical-align: top;">
            <div style="border: 1px solid Black; height: 100%; position: relative;">
                <div style="height: 32px; line-height: 32px; background-color: Gray; color: White;">@Model.Product.Name
                    > @Model.Name</div>
                <ul id="sprint" class="scrolling_list" style="list-style-type: none; margin: 0; padding: 0; overflow: auto; width: 100%; height: 100%;">
                    @*@foreach (var story in Model.Stories.OrderByDescending(s => s.Priority).ThenBy(s => s.Effort))
                    { 
                        <li class="backlog_story" style="display: block; height: 128px; position: relative;">
                            <span style="position: absolute; top: 4px; left: 4px;">@story.IssueId @story.Description
                            </span><span style="position: absolute; top: 4px; right: 4px;">Priority:
                                @story.Priority Effort: @story.Effort</span><span style="position: absolute; bottom: 4px; left: 4px;">Tasks(@story.Tasks.Count) Attachments(@story.Attachments.Count) </span><span style="position: absolute; bottom: 4px; right: 4px;"><a href="#">Remove from Sprint</a> <a href="#">Edit</a> <a href="#">Delete</a></span>
                        </li>
                    }*@
                </ul>
            </div>
        </td>
        <td style="width: 33%; vertical-align: top;">
            <div style="border: 1px solid Black; height: 100%; position: relative;">
                <div style="height: 32px; line-height: 32px; background-color: Gray; color: White;">@Model.Product.Name
                    > @Model.Name > Tasks</div>
                <ul class="scrolling_list" style="list-style-type: none; margin: 0; padding: 0; overflow: auto; width: 100%; height: 100%;">
                    @foreach (var story in Model.Stories.OrderByDescending(s => s.Priority).ThenBy(s => s.Effort))
                    { 
                        <li class="backlog_story" style="display: block; height: 128px; position: relative;">
                            <span style="position: absolute; top: 4px; left: 4px;">@story.IssueId @story.Description
                            </span><span style="position: absolute; top: 4px; right: 4px;">Priority:
                                @story.Priority Effort: @story.Effort</span><span style="position: absolute; bottom: 4px; left: 4px;">Tasks(@story.Tasks.Count) Attachments(@story.Attachments.Count) </span><span style="position: absolute; bottom: 4px; right: 4px;"><a href="#">Add to Sprint</a> <a href="#">Edit</a> <a href="#">Delete</a></span>
                        </li>
                    }
                </ul>
            </div>
        </td>
    </tr>
</table>
